<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>达幽系统集成框架 - 后台管理</title>
    <script type="text/javascript" src="./static/js/config.js"></script>
    <script type="text/javascript" src="./static/libs/axios/axios.min.js"></script>
    <script type="text/javascript" src="./static/libs/vue/vue.js"></script>
    <script type="text/javascript" src="./static/js/common.js"></script>
    <script type="text/javascript" src="./static/libs/element-ui/index.js"></script>
    <link rel="stylesheet" type="text/css" href="./static/libs/element-ui/index.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            height: 100%;
        }

        #app {
            width: 100%;
            height: 100%;
        }

        .el-header {
            color: #eee;
            line-height: 60px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .el-aside {
            color: #eee;
            transition: width .3s;
        }

        .el-menu {
            border-right: none;
        }

        .el-tabs__content {
            height: calc(100% - 41px);
        }

        .el-tabs__header {
            margin: 0 0 0;
        }

        .el-tab-pane {
            height: 100%;
        }

        .menu-content {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>

</head>
<body>
<div id="app" v-loading="showLoading"
     element-loading-text="加载中"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-container style="height: 100%;width: 100%">
        <el-aside :style="{backgroundColor: '#304156',width:isCollapse ? '60px':'200px'}">
            <el-header style="text-align: center;background-color: #2b2f3a">{{isCollapse ? '':'达幽后台管理系统'}}</el-header>
            <el-menu background-color="#304156"
                     text-color="#fff"
                     active-text-color="#ffd04b"
                     @select="selectMenu"
                     :collapse="isCollapse">
                <el-submenu :index="menu.id" v-for="menu in menus.filter(m=>m.type === 0)">
                    <template slot="title">
                        <i :class="menu.icon"></i>
                        <span slot="title">{{menu.title}}</span>
                    </template>
                    <el-menu-item :index="m.id" v-for="m in menus.filter(_m=>_m.pid === menu.id)">{{m.title}}
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="background-color: #3c8dbc">
                <i :class="isCollapse ? 'el-icon-s-unfold':'el-icon-s-fold'" style="font-size: 20px;cursor: pointer"
                   @click="isCollapse = !isCollapse" :title="isCollapse ? '展开菜单' : '收起菜单'"></i>
            </el-header>
            <el-tabs v-model="activeTabValue" type="card" closable @tab-remove="removeTab"
                     style="height: calc(100% - 60px);">
                <el-tab-pane v-for="tab in tabs" :label="tab.title" :name="tab.name" v-if="tab.show">
                    <iframe class="menu-content" :src="baseUrl+tab.url"></iframe>
                </el-tab-pane>
            </el-tabs>
        </el-container>
    </el-container>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            const baseUrl = reqBaseUrl;
            return {
                baseUrl,   //接口请求基路径
                isCollapse: false,   //是否收起导航菜单
                showLoading: false,  //是否显示加载层
                //url:'',
                users: [],   //用户列表
                depts: [],   //部门列表
                menus: [{
                    id: 1,
                    title: "系统管理",
                    name: "sysManager",
                    icon: "el-icon-s-tools",
                    type: 0,
                    pid: 0,
                    url: ""
                }, {
                    id: 2,
                    title: "部门管理",
                    name: "sysDeptManager",
                    type: 1,
                    pid: 1,
                    url: "sysDept"
                }, {
                    id: 3,
                    name: "sysUserManager",
                    title: "用户管理",
                    type: 1,
                    pid: 1,
                    url: "sysUser"
                }],
                tabs: [],
                activeTabValue: null
            }
        },
        methods: {
            //选中菜单
            selectMenu(index) {
                let tab = this.tabs.find(t => t.id === index);
                if (tab) {
                    tab.show = true;
                    this.activeTabValue = tab.name;
                } else {
                    let menu = this.menus.find(m => m.id === index);
                    this.tabs.push({...menu,show:true});
                    this.activeTabValue = menu.name;
                }
            },
            //移除被选中的菜单选项卡
            removeTab(tabName) {
                let index = this.tabs.findIndex(t => t.name === tabName);
                if (this.tabs.length > 1) {
                    let activeTabValue;
                    if (index < this.tabs.length - 1) {
                        activeTabValue = this.tabs[index + 1].name;
                    } else {
                        activeTabValue = this.tabs[index - 1].name;
                    }
                    if (this.activeTabValue !== activeTabValue) {
                        this.activeTabValue = activeTabValue;
                    }
                }
                //this.tabs.splice(index, 1);    //删除选项卡会出现iframe重新加载的问题
                this.tabs[index].show = false;   //用show属性来控制，不改变tabs的数量可以避免iframe重新渲染的问题
            }
        },
        created() {
        }
    });
</script>
</html>